<template>
    <view class="flex inner fit-width pb50">
        <image :src="item.image"  class="li-img"  @click="showDetail" />
        <view class="flex-1 ml20 fit-width"  @click="showDetail">
            <view class="f32">
                <text class="li-txt">{{ item.name }}</text>
            </view>
            <view class="gray f26" v-if="item.stockQuantity">还剩{{item.stockQuantity}}件</view>
			  <view class="gray f26" v-if="item.stockQuantity ==0">无库存</view>
            <view class="red f32 blod">¥{{item.price}}</view>
        </view>
        <view class="align-self-end" v-if="item.stockQuantity !=0">
            <product-change :selected.sync="item.selected" @onChange="onChange"/>
        </view>
    </view>
</template>

<script>
    import productChange from './product-change.vue'
	export default {
        name:'productItem',
        components: {
            productChange
        },
        props:{
            name:{
                type: String,
                default: ''
            },
            item:{
                type: Object,
                default: ()=>{}
            }
        },
		methods: {
			showDetail () {
				console.log('点击')
				this.$emit('onShowDetail',{name:this.name,item:this.item})
			},
            onChange(){
                this.$emit('onChange',{name:this.name,item:this.item})
            }
		}
	}
</script>

<style lang="scss" scoped>
    .align-self-end{
        align-self: flex-end
    }
	.li-img{
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}
	.li-txt{
	}
</style>
